<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, key) in banner" :key="key">
        <img :src="item.pic" alt="" />
      </van-swipe-item>
    </van-swipe>
    <van-icon name="arrow-left"  class="out"  size="40px" color='#ffffff' @click='$router.go(-1)'/>
    <!-- 商品详情 -->
    <section>
      <p>{{ list.name }}</p>
      <p>{{ list.characteristic }}</p>
      <p>
        <span>低价￥{{ list.minPrice }}</span>
        <span>原价{{ list.originalPrice }}</span>
        <span>库存{{ list.stores }}</span>
      </p>
    </section>
    <!-- 标签栏 -->
    <van-tabs v-model="active" line-width="160">
      <van-tab title="商品介绍">
        <div v-html="spjs"></div>
      </van-tab>
      <van-tab title="商品评价">内容 2</van-tab>
    </van-tabs>
    <!-- 购物车 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 0,
      //轮播图
      banner: [],
      //商品数据
      list: {},
      //商品介绍
      spjs: "",
      active: 0,
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    console.log(this.id);
    this.$http.post("/shop/goods/detail?id=" + this.id).then((res) => {
      console.log(res);
      this.banner = res.data.data.pics;
      console.log(this.banner);
      this.list = res.data.data.basicInfo;
      console.log(this.list);
      this.spjs = res.data.data.content;
    });
  },
};
</script>

<style lang='scss' >
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
  img {
    width: 100%;
    height: 400px;
  }
}
section {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  p:nth-of-type(2) {
    color: rgb(97, 84, 84);
  }
  p:nth-of-type(3) {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.img-lazyload {
  width: 100% !important;
  height: 100% !important;
}
.van-goods-action {
  z-index: 100;
}
.out{
    position: fixed;
    top: 20px;
    left:20px;
    background: rgba(117, 95, 117, 0.315);
    border-radius: 50%;
    text-align: center;
}
</style>